<script setup lang='ts'>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

var option = ref({
  tooltip: {
    trigger: "item",
    formatter: function (params) {
      var name = params.name;
      return (
        '<div style="display:flex; align-items:center;">' +
        '<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:' +
        params.color +
        ';margin-right:5px;"></span>' +
        name +
        ": " +
        params.percent +
        "</div>"
      );
    },
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["0%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 100,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        position: "center",
      },
      labelLine: {
        show: true,
      },
      data: [
        { value: 30, name: "头条" },
        { value: 30, name: "生活" },
        { value: 180, name: "社会" },
      ],
      label: {
        show: true,
        formatter: function (params) {
          var name = params.name;
          var percent = params.percent;
          return name + "\n" + percent;
        },
      },
    },
  ],
});
let warp = ref("");
let myChart;
onMounted(() => {
  myChart = echarts.init(warp.value);
  option && myChart.setOption(option.value);
});
window.addEventListener("resize", function () {
  myChart.resize();
});
</script>
<template>
  <div ref="warp" style="width: 100%; height: 100%"></div>
</template>

<style>
</style>